<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;}
		</style>
	</head>
	<body>		
		<!-- 199000912邹星宇 -->
		<img id="mytank" src="images/right.png" style="left:10px;top:50px">
		<script>
			window.document.oncontextmenu = function(){return false;}
			var mytank=document.getElementById("mytank")
			document.addEventListener("keydown",keydown);
			function keydown(e){
				switch(e.keyCode){
					case 65:mytank.src='images/left.png';
							if(parseInt(mytank.style.left)-10<0){alert("不能再往左了"); return}
							mytank.style.left=parseInt(mytank.style.left)-10+"px";break;
					case 68:mytank.src='images/right.png';
							if(parseInt(mytank.style.left)+10>document.documentElement.clientWidth-85){alert("不能再往右了"); return}
							mytank.style.left=parseInt(mytank.style.left)+10+"px";break;
					case 87:mytank.src='images/up.png';
							if(parseInt(mytank.style.top)-10<0){alert("不能再往上了"); return}
							mytank.style.top=parseInt(mytank.style.top)-10+"px";break;
					case 83:mytank.src='images/down.png';
							if(parseInt(mytank.style.top)+10>document.documentElement.clientHeight-58){alert("不能再往下了"); return}
							mytank.style.top=parseInt(mytank.style.top)+10+"px";break;
				}
			}
		</script>
	</body>
</html>
